<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">

</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>添加收藏夹</legend>
        <div class="layui-field-box">
            <div class="layui-col-md6">
                <form class="layui-form layui-form-pane" lay-filter="formMusic" id="formMusic">
                    <div class="layui-form-item">
                        <label class="layui-form-label">收藏夹名称:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="name" id="name" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入收藏夹的名称">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">收藏夹所属用户:</label>
                        <div class="layui-input-block">
                            <select name="uid" id="uid">
                                <option value="0">不可空</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">标签:</label>
                        <div class="layui-input-block">
                            <textarea name="tags" id="tags" class="layui-textarea" placeholder="请填写内容"></textarea>
                        </div>
                    </div>
                    
                    <!-- 提交按钮    -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit lay-filter="addFavorite" id="addFavorite">确认添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;

        $.get('http://127.0.0.1:8080/user/list',function(resp){
            let list = resp.data
            $.each(list,(i,a)=>{
                $('#uid').append(`<option value="${a.id}">${a.username}</option>`)
            })
            //
            form.render('select')
        })

        form.on('submit(addFavorite)', function(data){
            var field = data.field; // 获取表单字段值
            //将js对象转换为json字符串（后台接受对象为requestBody）
            let json = JSON.stringify(field)
            console.log(json);
            // 此处可执行 Ajax 等操作
            // …
            $.ajax({
                url:'http://127.0.0.1:8080/favorite/add',  //请求服务器接口地址
                type:'POST',                            //请求方法
                contentType:'application/json',          //数据提交方式
                data:json,                              //数据
                success:function (resp){                //成功的回调函数
                    layer.msg(resp.msg)
                }
            })

        })


    })
</script>
</body>
</html>